<template>
 <div>
  <button @click="msg = '你坏'">修改msg</button>
     我是app.vue
     <p>这是p标签 -- {{ msg  }}</p>

     <button @click="show = false">销毁</button>
     <my-father v-if="show"></my-father>
 </div>
</template>

<script>
import MyFather from './components/MyFather.vue'
export default {
  components: {
    MyFather
  },
  data() {
    return {
      msg: '你好',
      show: true
    }
  },
  methods: {
    fn () {
      console.log('fn被调用')
    }
  },

  beforeCreate () {
    console.log('beforeCreate', this.msg) // undefined
    // this.fn() // 会报错
  },

  created (){
    console.log('created', this.msg) // 你好
    this.fn()
  },

  // 渲染前钩子-还无法访问真实dom
  beforeMount () {
    console.log('beforeMount', document.querySelector('p')) // null
  },
  // 渲染后钩子-能访问真实dom
  mounted () {
    console.log('mounted', document.querySelector('p')) // 能找到p标签
  },

  beforeUpdate () {
    console.log('beforeUpdate', this.msg , document.querySelector('p').innerHTML)
  },

  updated () {
    console.log('updated', this.msg , document.querySelector('p').innerHTML)
  },
}
</script>

<style>

</style>